"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Heart, MessageCircle, Share2, Play } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import CommentSection from "@/components/comments/shared/comment-section"
import type { CommunityPost } from "@/types/community-post"

interface PostCardProps {
  post: CommunityPost
}

export default function PostCard({ post }: PostCardProps) {
  const [liked, setLiked] = useState(false)
  const [showComments, setShowComments] = useState(false)

  const handleLike = () => {
    setLiked(!liked)
    // 这里应该调用API来更新点赞状态
  }

  const handleShare = () => {
    // 这里应该实现实际的分享逻辑
    console.log("Sharing post:", post.id)
  }

  return (
      <Card className="mb-4">
        <CardHeader className="flex flex-row items-center space-x-4">
          <Avatar>
            <AvatarImage src={post.author.avatar} alt={post.author.username} />
            <AvatarFallback>{post.author.username[0]}</AvatarFallback>
          </Avatar>
          <div>
            <h3 className="font-semibold">{post.author.username}</h3>
            <p className="text-sm text-muted-foreground">{post.timestamp}</p>
          </div>
        </CardHeader>
        <CardContent>
          <p className="mb-4 whitespace-pre-line">{post.content}</p>
          {post.type === "video" && post.videoUrl && (
              <div className="aspect-video rounded-lg overflow-hidden bg-muted">
                <video src={post.videoUrl} controls className="w-full h-full object-cover" />
              </div>
          )}
          {post.type === "music" && post.musicInfo && (
              <div className="flex items-center space-x-4 bg-muted p-4 rounded-lg">
                <img
                    src={post.musicInfo.cover || "/placeholder.svg"}
                    alt={post.musicInfo.title}
                    className="w-16 h-16 rounded"
                />
                <div className="flex-1">
                  <h4 className="font-semibold">{post.musicInfo.title}</h4>
                  <p className="text-sm text-muted-foreground">{post.musicInfo.artist}</p>
                </div>
                <Button size="icon" variant="secondary">
                  <Play className="h-4 w-4" />
                </Button>
              </div>
          )}
          {post.location && (
              <div className="mt-2 flex items-center gap-1 text-sm text-muted-foreground">
                <span>{post.timestamp}</span>
                <span>
              {post.location.city}·{post.location.name}
            </span>
              </div>
          )}
        </CardContent>
        <CardFooter className="flex flex-col">
          <div className="flex justify-between w-full mb-2">
            <Button variant="ghost" size="sm" onClick={handleLike}>
              <Heart className={`mr-2 h-4 w-4 ${liked ? "fill-current text-red-500" : ""}`} />
              {post.likes + (liked ? 1 : 0)}
            </Button>
            <Button variant="ghost" size="sm" onClick={() => setShowComments(!showComments)}>
              <MessageCircle className="mr-2 h-4 w-4" />
              {post.commentCount || 0}
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm">
                  <Share2 className="mr-2 h-4 w-4" />
                  {post.shares}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem onClick={handleShare}>分享到朋友圈</DropdownMenuItem>
                <DropdownMenuItem onClick={handleShare}>分享给好友</DropdownMenuItem>
                <DropdownMenuItem onClick={handleShare}>复制链接</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          {showComments && (
              <div className="w-full mt-2 border-t pt-4">
                <CommentSection contentId={post.id.toString()} contentType="community" />
              </div>
          )}
        </CardFooter>
      </Card>
  )
}

